new Vue({
  el: "#app",
  data() {
    return {
      i_BasicInfo1: [],
      i_BasicInfo2: [],
      i_ShopSale: [],
      i_GoodType: [],
      i_GoodOrder: [],
      i_AllAge: [],
      i_PingTaiPer: [],
      timer: null,
    };
  },
  mounted() {
    this.getData();
    this.ready();
    this.timer = setInterval(this.autoPlay, 3000);
    console.log(this.timer);
  },
  methods: {
    // 获取数据
    getData() {
      const that = this;
      // 基本信息1
      $.ajax({
        url: "./ALLJSON/survey/basicInfo1.json",
        type: "GET",
        success: function (res) {
          if (res.Status === "success") {
            if (that.i_BasicInfo1 == res.Data) {
              return;
            }
            that.i_BasicInfo1 = res.Data;
          }
        },
      });
      // 基本信息2
      $.ajax({
        url: "./ALLJSON/survey/basicInfo2.json",
        type: "GET",
        success: function (res) {
          if (res.Status === "success") {
            if (that.i_BasicInfo2 == res.Data) {
              return;
            }
            that.i_BasicInfo2 = res.Data;
          }
        },
      });
      // 店铺销售情况
      $.ajax({
        url: "./ALLJSON/survey/shopsale.json",
        type: "GET",
        success: function (res) {
          if (res.Status === "success") {
            if (that.i_ShopSale == res.Data) {
              return;
            }
            that.i_ShopSale = res.Data;
          }
        },
      });
      // 商品类别
      $.ajax({
        url: "./ALLJSON/survey/goodstype.json",
        type: "GET",
        success: function (res) {
          if (res.Status === "success") {
            if (that.i_GoodsType == res.Data) {
              return;
            }
            that.i_GoodsType = res.Data;
            that.ceshis2(res.Data);
          }
        },
      });
      // 订单情况
      $.ajax({
        url: "./ALLJSON/survey/goodsorder.json",
        type: "GET",
        success: function (res) {
          if (res.Status === "success") {
            if (that.i_GoodsOrder == res.Data) {
              return;
            }
            that.i_GoodsOrder = res.Data;
            that.ceshis3(res.Data);
          }
        },
      });
      // 各年龄段占比
      $.ajax({
        url: "./ALLJSON/survey/allage.json",
        type: "GET",
        success: function (res) {
          if (res.Status === "success") {
            if (that.i_AllAge == res.Data) {
              return;
            }
            that.i_AllAge = res.Data;
            that.ceshis(res.Data);
          }
        },
      });
      // 各平台占比
      $.ajax({
        url: "./ALLJSON/survey/PingTaiPer.json",
        type: "GET",
        success: function (res) {
          if (res.Status === "success") {
            if (that.i_PingTaiPer == res.Data) {
              return;
            }
            that.i_PingTaiPer = res.Data;

            that.ceshis1(that.i_PingTaiPer);
          }
        },
      });
    },
    // 商品分类占比
    ceshis2(goods) {
      var myChart = echarts.init(document.getElementById("chart3"));
      var goodsname = [];
      for (var go = 0; go < goods.length; go++) {
        goodsname.push(goods[go].name);
      }
      option = {
        /*backgroundColor: '#000',*/
        animation: true,
        title: {
          /*"text": 24,*/
          /* "subtext": "沥青工",*/
          x: "center",
          y: "center",
          textStyle: {
            color: "#fff",
            fontSize: 10,
            fontWeight: "normal",
            align: "center",
            width: "200px",
          },
          subtextStyle: {
            color: "#fff",
            fontSize: 12,
            fontWeight: "normal",
            align: "center",
          },
        },
        legend: {
          width: "100%",
          left: "center",
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
          icon: "circle",
          right: "0",
          bottom: "0",
          padding: [15, 20],
          itemGap: 5,
          data: goodsname,
        },
        series: [
          {
            type: "pie",
            center: ["50%", "40%"],
            radius: ["20%", "43%"],
            color: [
              "#FEE449",
              "#00FFFF",
              "#00FFA8",
              "#9F17FF",
              "#FFE400",
              "#F76F01",
              "#01A4F7",
              "#FE2C8A",
            ],
            startAngle: 135,
            labelLine: {
              normal: {
                length: 15,
              },
            },
            label: {
              normal: {
                formatter: "{b|{b}:}  {per|{d}%} ",
                backgroundColor: "rgba(255, 147, 38, 0)",
                borderColor: "transparent",
                borderRadius: 4,
                rich: {
                  a: {
                    color: "#999",
                    lineHeight: 12,
                    align: "center",
                  },
                  hr: {
                    borderColor: "#aaa",
                    width: "100%",
                    borderWidth: 1,
                    height: 0,
                  },
                  b: {
                    color: "#b3e5ff",
                    fontSize: 16,
                    lineHeight: 33,
                  },
                  c: {
                    fontSize: 14,
                    color: "#eee",
                  },
                  per: {
                    color: "#FDF44E",
                    fontSize: 14,
                    padding: [5, 8],
                    borderRadius: 2,
                  },
                },
                textStyle: {
                  color: "#fff",
                  fontSize: 16,
                },
              },
            },
            emphasis: {
              label: {
                show: true,
                formatter: "{b|{b}:}  {per|{d}%}  ",
                backgroundColor: "rgba(255, 147, 38, 0)",
                borderColor: "transparent",
                borderRadius: 4,
                rich: {
                  a: {
                    color: "#999",
                    lineHeight: 22,
                    align: "center",
                  },
                  hr: {
                    borderColor: "#aaa",
                    width: "100%",
                    borderWidth: 1,
                    height: 0,
                  },
                  b: {
                    color: "#fff",
                    fontSize: 14,
                    lineHeight: 33,
                  },
                  c: {
                    fontSize: 14,
                    color: "#eee",
                  },
                  per: {
                    color: "#FDF44E",
                    fontSize: 14,
                    padding: [5, 6],
                    borderRadius: 2,
                  },
                },
              },
            },
            data: goods,
          },
          {
            type: "pie",
            center: ["50%", "40%"],
            radius: ["15%", "14%"],
            label: {
              show: false,
            },
            data: [
              {
                value: 78,
                name: "实例1",
                itemStyle: {
                  normal: {
                    color: {
                      x: 0,
                      y: 0,
                      x2: 1,
                      y2: 0,
                      type: "linear",
                      global: false,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#9F17FF",
                        },
                        {
                          offset: 0.2,
                          color: "#01A4F7",
                        },
                        {
                          offset: 0.5,
                          color: "#FE2C8A",
                        },
                        {
                          offset: 0.8,
                          color: "#FEE449",
                        },
                        {
                          offset: 1,
                          color: "#00FFA8",
                        },
                      ],
                    },
                  },
                },
              },
            ],
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      myChart.currentIndex = -1;
      //myChart.setOption(option);
      //console.log(option.series[0].data[0]);
      setInterval(function () {
        var dataLen = option.series[0].data.length;
        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: myChart.currentIndex,
        });
        myChart.currentIndex = (myChart.currentIndex + 1) % dataLen;
        // 高亮当前图形
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: myChart.currentIndex,
        });
      }, 1000);

      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },

    // 订单情况
    ceshis3(order) {
      var myChart = echarts.init(document.getElementById("chart4"));
      ordername = [];
      ordernum = [];
      for (var o = 0; o < order.length; o++) {
        ordername.push(order[o].name);
        ordernum.push(order[o].num);
      }
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: { lineStyle: { color: "#fff" } },
        },
        legend: {
          icon: "rect",
          itemWidth: 14,
          itemHeight: 5,
          itemGap: 10,
          data: ordername,
          right: "10px",
          top: "0px",
          textStyle: { fontSize: 12, color: "#fff" },
        },
        grid: { x: 40, y: 50, x2: 45, y2: 40 },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: { lineStyle: { color: "#57617B" } },
            axisLabel: { textStyle: { color: "#fff" } },
            data: [
              "12月\n01号",
              "12月\n02号",
              "12月\n03号",
              "12月\n04号",
              "12月\n05号",
              "12月\n06号",
              "12月\n07号",
              "12月\n08号",
              "12月\n09号",
              "12月\n10号",
              "12月\n11号",
              "12月\n12号",
              "12月\n13号",
              "12月\n14号",
              "12月\n15号",
              "12月\n16号",
              "12月\n17号",
              "12月\n18号",
              "12月\n19号",
              "12月\n20号",
              "12月\n21号",
              "12月\n22号",
              "12月\n23号",
              "12月\n24号",
              "12月\n25号",
              "12月\n26号",
              "12月\n27号",
              "12月\n28号",
              "12月\n29号",
              "12月\n30号",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
            axisTick: {
              show: false,
            },
            axisLine: { lineStyle: { color: "#57617B" } },
            axisLabel: {
              margin: 10,
              textStyle: { fontSize: 12 },
              textStyle: { color: "#fff" },
              formatter: "{value}分",
            },
            splitLine: { lineStyle: { color: "#57617B" } },
          },
          {
            type: "value",
            axisTick: {
              show: false,
            },
            axisLine: { lineStyle: { color: "#57617B" } },
            axisLabel: {
              margin: 10,
              textStyle: { fontSize: 12 },
              textStyle: { color: "#fff" },
              formatter: "{value}个",
            },
            splitLine: { show: false, lineStyle: { color: "#57617B" } },
          },
        ],
        series: [
          {
            name: ordername[0],
            type: "line",
            smooth: true,
            lineStyle: { normal: { width: 2 } },
            yAxisIndex: 0,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(185,150,248,0.3)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(185,150,248,0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10,
              },
            },
            itemStyle: { normal: { color: "#B996F8" } },
            data: ordernum[0],
          },
          {
            name: ordername[1],
            type: "line",
            smooth: true,
            lineStyle: { normal: { width: 2 } },
            yAxisIndex: 0,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(3, 194, 236, 0.3)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(3, 194, 236, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10,
              },
            },
            itemStyle: { normal: { color: "#03C2EC" } },
            data: ordernum[1],
          },
          {
            name: ordername[2],
            type: "line",
            smooth: true,
            lineStyle: { normal: { width: 2 } },
            yAxisIndex: 1,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(218, 57, 20, 0.3)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(218, 57, 20, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10,
              },
            },
            itemStyle: { normal: { color: "#DA3914" } },
            data: ordernum[2],
          },
          {
            name: ordername[3],
            type: "line",
            smooth: true,
            lineStyle: { normal: { width: 2 } },
            yAxisIndex: 1,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(232, 190, 49, 0.3)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(232, 190, 49, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10,
              },
            },
            itemStyle: { normal: { color: "#E8BE31" } },
            data: ordernum[3],
          },
        ],
      };
      /*var myChart = echarts.init(document.getElementById('channel_handle_detail'));
            myChart.clear();
            if(data.handleTimeData.length>0){
                myChart.setOption(option);
            }else{
                noDataTip($("#channel_handle_detail"));
            }*/
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },

    // 各年龄段占比
    ceshis(allage) {
      var myChart = echarts.init(document.getElementById("shuiipin"));

      var img =
        "";

      var trafficWay = allage;
      var age = [];
      for (var ag = 0; ag < allage.length; ag++) {
        age.push(allage[ag].name);
      }
      var data = [];
      var color = [
        "#00ffff",
        "#00cfff",
        "#006ced",
        "#ffe000",
        "#ffa800",
        "#ff5b00",
        "#ff3000",
      ];
      for (var i = 0; i < trafficWay.length; i++) {
        data.push(
          {
            value: trafficWay[i].value,
            name: trafficWay[i].name,
            itemStyle: {
              normal: {
                borderWidth: 5,
                shadowBlur: 20,
                borderColor: color[i],
                shadowColor: color[i],
              },
            },
          },
          {
            value: 2,
            name: "",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: "rgba(0, 0, 0, 0)",
                borderColor: "rgba(0, 0, 0, 0)",
                borderWidth: 0,
              },
            },
          }
        );
      }
      var seriesOption = [
        {
          name: "",
          type: "pie",
          clockWise: false,
          radius: [45, 45],
          /*hoverAnimation: false,*/

          itemStyle: {
            normal: {
              label: {
                show: true,
                position: "outside",
                color: "#ddd",
                formatter: function (params) {
                  var percent = 0;
                  var total = 0;
                  for (var i = 0; i < trafficWay.length; i++) {
                    total += trafficWay[i].value;
                  }
                  percent = ((params.value / total) * 100).toFixed(0);
                  if (params.name !== "") {
                    return (
                      "年龄段：" +
                      params.name +
                      "\n" +
                      "\n" +
                      "占百分比：" +
                      percent +
                      "%"
                    );
                  } else {
                    return "";
                  }
                },
              },
              labelLine: {
                length: 30,
                length2: 40,
                show: true,
                color: "#00ffff",
              },
            },
          },
          data: data,
        },
      ];
      option = {
        /*backgroundColor: '#0A2E5D',*/
        color: color,
        title: {
          text: "年龄段",
          top: "5%",
          textAlign: "center",
          left: "49%",
          textStyle: {
            color: "#fff",
            fontSize: 22,
            fontWeight: "400",
          },
        },
        graphic: {
          elements: [
            {
              type: "image",
              z: 3,
              style: {
                image: img,
                width: 140,
                height: 140,
              },
              left: "center",
              top: "center",
              position: [20, 20],
            },
          ],
        },
        tooltip: {
          show: false,
        },
        legend: {
          icon: "circle",
          orient: "horizontal",
          // x: 'left',
          data: age,
          right: 80,
          bottom: 1,
          align: "right",
          textStyle: {
            color: "#fff",
          },
          itemGap: 20,
          padding: [5, 20],
        },
        toolbox: {
          show: false,
        },
        series: seriesOption,
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);

      myChart.currentIndex = -1;

      setInterval(function () {
        var dataLen = option.series[0].data.length;
        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: myChart.currentIndex,
        });
        myChart.currentIndex = (myChart.currentIndex + 1) % dataLen;
        // 高亮当前图形
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: myChart.currentIndex,
        });
      }, 1000);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },

    // 各平台占比
    ceshis1(pingtais) {
      var myChart = echarts.init(document.getElementById("chart2"));

      var ydata = pingtais;
      var color = [
        "#8d7fec",
        "#5085f2",
        "#e75fc3",
        "#f87be2",
        "#f2719a",
        "#fca4bb",
        "#f59a8f",
        "#fdb301",
        "#57e7ec",
        "#cf9ef1",
      ];
      var xdata = [];
      for (var nameNum = 0; nameNum < pingtais.length; nameNum++) {
        xdata.push(pingtais[nameNum].name);
      }

      option = {
        /*backgroundColor: "rgba(255,255,255,1)",*/
        color: color,
        legend: {
          orient: "vartical",
          x: "left",
          top: "center",
          left: "53%",
          bottom: "0%",
          data: xdata,
          itemWidth: 8,
          itemHeight: 8,
          textStyle: {
            color: "#fff",
          },
          /*itemGap: 16,*/
          /*formatter:function(name){
                      var oa = option.series[0].data;
                      var num = oa[0].value + oa[1].value + oa[2].value + oa[3].value+oa[4].value + oa[5].value + oa[6].value + oa[7].value+oa[8].value + oa[9].value ;
                      for(var i = 0; i < option.series[0].data.length; i++){
                          if(name==oa[i].name){
                              return ' '+name + '    |    ' + oa[i].value + '    |    ' + (oa[i].value/num * 100).toFixed(2) + '%';
                          }
                      }
                    }*/

          formatter: function (name) {
            return "" + name;
          },
        },
        series: [
          {
            type: "pie",
            clockwise: false, //饼图的扇区是否是顺时针排布
            minAngle: 2, //最小的扇区角度（0 ~ 360）
            radius: ["20%", "60%"],
            center: ["30%", "45%"],
            avoidLabelOverlap: false,
            itemStyle: {
              //图形样式
              normal: {
                borderColor: "#ffffff",
                borderWidth: 1,
              },
            },
            label: {
              normal: {
                show: false,
                position: "center",
                formatter: "{text|{b}}\n{c} ({d}%)",
                rich: {
                  text: {
                    color: "#fff",
                    fontSize: 14,
                    align: "center",
                    verticalAlign: "middle",
                    padding: 8,
                  },
                  value: {
                    color: "#8693F3",
                    fontSize: 24,
                    align: "center",
                    verticalAlign: "middle",
                  },
                },
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: 24,
                },
              },
            },
            data: ydata,
          },
        ],
      };
      myChart.setOption(option);

      setTimeout(function () {
        myChart.on("mouseover", function (params) {
          if (params.name == ydata[0].name) {
            myChart.dispatchAction({
              type: "highlight",
              seriesIndex: 0,
              dataIndex: 0,
            });
          } else {
            myChart.dispatchAction({
              type: "downplay",
              seriesIndex: 0,
              dataIndex: 0,
            });
          }
        });

        myChart.on("mouseout", function (params) {
          myChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: 0,
          });
        });
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: 0,
        });
      }, 1000);

      myChart.currentIndex = -1;

      setInterval(function () {
        var dataLen = option.series[0].data.length;

        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: myChart.currentIndex,
        });
        myChart.currentIndex = (myChart.currentIndex + 1) % dataLen;
        // 高亮当前图形
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: myChart.currentIndex,
        });
      }, 1000);

      // 使用刚指定的配置项和数据显示图表。
      /*myChart.setOption(option);*/
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },

    // 店铺自动轮播
    autoPlay() {
      var $bannerUl = $("#banner ul"),
        $bannerLi = $("#banner ul li");
      //动态获取ul的宽度
      $bannerUl.css("width", $bannerLi.width() * $bannerLi.length);
      $bannerUl.animate(
        {
          marginLeft: -$bannerLi.width(),
        },
        500,
        function () {
          $(this)
            .animate({ marginLeft: 0 }, 0)
            .find("li")
            .eq(0)
            .appendTo($(this));
          //把每次移动后的第一个li放到ul的最后面
          /*
           * 由于把第一个li放到ul的最后面，就会把第二个li挤到第一个li的位置，但是我们又需要显示第二个li，
           * 所以需要移动回原点，但是这个移动过程不能被看到，所以执行时间是0
           */
        }
      );
    },
    // 清除定时器和设置定时器
    dpmouseover() {
      clearInterval(this.timer);
    },
    dpmouseout() {
      this.timer = setInterval(this.autoPlay, 3000);
    },
    //  chart3点击事件
    chart3click() {
      $(".filterbg").show();
      $(".popup").show();
      $(".popup").width("3px");
      $(".popup").animate({ height: "76%" }, 400, function () {
        $(".popup").animate({ width: "82%" }, 400);
      });
      setTimeout(summaryShow, 800);
    },
    // popupClose点击事件
    popupCloseclick() {
      $(".popupClose").css("display", "none");
      $(".summary").hide();
      $(".popup").animate({ width: "3px" }, 400, function () {
        $(".popup").animate({ height: 0 }, 400);
      });
      setTimeout(summaryHide, 800);
    },
    summaryShow() {
      $(".popupClose").css("display", "block");
      $(".summary").show();
      setSummary();
    },
    summaryHide() {
      $(".filterbg").hide();
      $(".popup").hide();
      $(".popup").width(0);
    },
    ready() {
      var whei = $(window).width();
      $("html").css({ fontSize: whei / 22 });
      $(window).resize(function () {
        var whei = $(window).width();
        $("html").css({ fontSize: whei / 22 });
      });
    },
  },
  directives: {},
  filters: {},
});
$(function () {
  //   ceshis1();
  //   ceshis2();
  //   ceshis3();
  ceshis4();
  /*ceshis5();*/
  ceshis6();
  //   ceshis();

  function ceshis4() {
    var myChart = echarts.init(document.getElementById("chart5"));

    var labelimg = "";

    option = {
      /*backgroundColor: "#0E233E",*/
      grid: {
        left: "6%",
        top: "10%",
        right: "3%",
        bottom: "15%",
      },
      legend: {
        data: ["日本", "韩国", "美国", "澳大利亚", "俄罗斯", "法国", "英国"],
        top: "92%",
        icon: "circle",
        textStyle: {
          color: "#0DCAD2",
        },
      },
      color: [
        "#534EE1",
        "#ECD64F",
        "#00E4F0",
        "#44D16D",
        "#124E91",
        "#BDC414",
        "#C8CCA5",
      ],
      tooltip: {
        position: "top",
      },
      xAxis: {
        type: "category",
        data: ["日本", "韩国", "美国", "澳大利亚", "俄罗斯", "法国", "英国"],
        axisLabel: {
          show: false,
          color: "#999999",
          fontSize: 16,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
      yAxis: {
        type: "value",
        axisLabel: {
          show: false,
          color: "#999999",
          fontSize: 16,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
      series: [
        {
          name: "信息",
          data: [0, 0, 0, 0, 0, 0, 0],
          stack: "a",
          type: "bar",
        },
        {
          name: "往下场所",
          data: [0, 0, 0, 0, 0, 0, 0],
          stack: "a",
          type: "bar",
        },
        {
          name: "关系",
          data: [0, 0, 0, 0, 0, 0, 0],
          stack: "a",
          type: "bar",
        },
        {
          name: "关联",
          data: [0, 0, 0, 0, 0, 0, 0],
          stack: "a",
          type: "bar",
        },
        {
          name: "人",
          data: [0, 0, 0, 0, 0, 0, 0],
          stack: "a",
          type: "bar",
        },
        {
          name: "物",
          data: [0, 0, 0, 0, 0, 0, 0],
          stack: "a",
          type: "bar",
        },
        {
          name: "组织",
          data: [0, 0, 0, 0, 0, 0, 0],
          stack: "a",
          type: "bar",
        },
        {
          type: "pictorialBar",
          name: "提示框值",
          data: [
            {
              name: "",
              value: 868,
              label: {
                show: true,
                position: "top",
                formatter: function (params) {
                  var index = params.dataIndex;
                  var str =
                    "{a|" + params.value + "}\n{c|" + params.value + "个}";
                  return str;
                },
                rich: {
                  a: {
                    fontSize: 18,
                    color: "#534EE1",
                    align: "center",
                    height: 40,
                  },
                  c: {
                    fontSize: 18,
                    color: "#fff",
                    padding: [-2, 0, 2, 0],
                    backgroundColor: {
                      image: labelimg,
                    },
                    align: "center",
                    verticalAlign: "bottom",
                    height: 50,
                    lineHeight: 40,
                    width: 100,
                  },
                },
              },
              itemStyle: {
                normal: {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(83,78,225,1)",
                      },
                      {
                        offset: 1,
                        color: "rgba(83,78,225,0)",
                      },
                    ],
                    global: false,
                  },
                },
              },
            },
            {
              name: "",
              value: 306,
              label: {
                show: true,
                position: "top",
                formatter: function (params) {
                  var index = params.dataIndex;
                  var str =
                    "{a|" + params.value + "}\n{c|" + params.value + "个}";
                  return str;
                },
                rich: {
                  a: {
                    fontSize: 18,
                    color: "#ECD64F",
                    align: "center",
                    height: 40,
                  },
                  c: {
                    fontSize: 18,
                    color: "#fff",
                    padding: [-4, 0, 8, 0],
                    backgroundColor: {
                      image: labelimg,
                    },
                    align: "center",
                    verticalAlign: "bottom",
                    height: 45,
                    lineHeight: 40,
                    width: 100,
                  },
                },
              },
              itemStyle: {
                normal: {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(236,214,79,1)",
                      },
                      {
                        offset: 1,
                        color: "rgba(236,214,79,0)",
                      },
                    ],
                    global: false,
                  },
                },
              },
            },
            {
              name: "",
              value: 162,
              label: {
                show: true,
                position: "top",
                formatter: function (params) {
                  var index = params.dataIndex;
                  var str =
                    "{a|" + params.value + "}\n{c|" + params.value + "个}";
                  return str;
                },
                rich: {
                  a: {
                    fontSize: 18,
                    color: "#00E4F0",
                    align: "center",
                    height: 40,
                  },
                  c: {
                    fontSize: 18,
                    color: "#fff",
                    padding: [-4, 0, 8, 0],
                    backgroundColor: {
                      image: labelimg,
                    },
                    align: "center",
                    verticalAlign: "bottom",
                    height: 45,
                    lineHeight: 40,
                    width: 100,
                  },
                },
              },
              itemStyle: {
                normal: {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(0,228,240,1)",
                      },
                      {
                        offset: 1,
                        color: "rgba(0,228,240,0)",
                      },
                    ],
                    global: false,
                  },
                },
              },
            },
            {
              name: "",
              value: 362,
              label: {
                show: true,
                formatter: function (params) {
                  var index = params.dataIndex;
                  var str =
                    "{a|" + params.value + "}\n{c|" + params.value + "个}";
                  return str;
                },
                position: "top",
                rich: {
                  a: {
                    fontSize: 18,
                    color: "#44D16D",
                    align: "center",
                    height: 40,
                  },
                  c: {
                    fontSize: 18,
                    color: "#fff",
                    padding: [-4, 0, 8, 0],
                    backgroundColor: {
                      image: labelimg,
                    },
                    align: "center",
                    verticalAlign: "bottom",
                    height: 45,
                    lineHeight: 40,
                    width: 100,
                  },
                },
              },
              itemStyle: {
                normal: {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(68,209,109,1)",
                      },
                      {
                        offset: 1,
                        color: "rgba(68,209,109,0)",
                      },
                    ],
                    global: false,
                  },
                },
              },
            },
            {
              name: "",
              value: 460,
              label: {
                show: true,
                position: "top",
                formatter: function (params) {
                  var index = params.dataIndex;
                  var str =
                    "{a|" + params.value + "}\n{c|" + params.value + "个}";
                  return str;
                },
                rich: {
                  a: {
                    fontSize: 18,
                    color: "#124E91",
                    align: "center",
                    height: 30,
                  },
                  c: {
                    fontSize: 18,
                    color: "#fff",
                    padding: [-4, 0, 8, 0],
                    backgroundColor: {
                      image: labelimg,
                    },
                    align: "center",
                    verticalAlign: "bottom",
                    height: 45,
                    lineHeight: 40,
                    width: 100,
                  },
                },
              },
              itemStyle: {
                normal: {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(18,78,145,1)",
                      },
                      {
                        offset: 1,
                        color: "rgba(18,78,145,0)",
                      },
                    ],
                    global: false,
                  },
                },
              },
            },
            {
              name: "",
              value: 606,
              label: {
                show: true,
                position: "top",
                formatter: function (params) {
                  var index = params.dataIndex;
                  var str =
                    "{a|" + params.value + "}\n{c|" + params.value + "个}";
                  return str;
                },
                rich: {
                  a: {
                    fontSize: 18,
                    color: "#BDC414",
                    align: "center",
                    height: 30,
                  },
                  c: {
                    fontSize: 18,
                    color: "#fff",
                    padding: [-4, 0, 8, 0],
                    backgroundColor: {
                      image: labelimg,
                    },
                    align: "center",
                    verticalAlign: "bottom",
                    height: 45,
                    lineHeight: 40,
                    width: 100,
                  },
                },
              },
              itemStyle: {
                normal: {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(189,196,20,1)",
                      },
                      {
                        offset: 1,
                        color: "rgba(189,196,20,0)",
                      },
                    ],
                    global: false,
                  },
                },
              },
            },
            {
              name: "",
              value: 506,
              label: {
                show: true,
                position: "top",
                formatter: function (params) {
                  var index = params.dataIndex;
                  var str =
                    "{a|" + params.value + "}\n{c|" + params.value + "个}";
                  return str;
                },
                rich: {
                  a: {
                    fontSize: 18,
                    color: "#C8CCA5",
                    align: "center",
                    height: 30,
                  },
                  c: {
                    fontSize: 18,
                    color: "#fff",
                    padding: [-4, 0, 8, 0],
                    backgroundColor: {
                      image: labelimg,
                    },
                    align: "center",
                    verticalAlign: "bottom",
                    height: 45,
                    lineHeight: 40,
                    width: 100,
                  },
                },
              },
              itemStyle: {
                normal: {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(200,204,165,1)",
                      },
                      {
                        offset: 1,
                        color: "rgba(200,204,165,0)",
                      },
                    ],
                    global: false,
                  },
                },
              },
            },
          ],
          stack: "a",
          symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
        },
      ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }

  function ceshis5() {
    var myChart = echarts.init(document.getElementById("map"));

    var uploadedDataURL = "./js/data-1528971808162-BkOXf61WX.json";

    //如果想要修改，请点击上方克隆，然后在自己的版本上修改，不要在lz的版本上改！！

    // echarts.extendsMap = function(id, opt) {
    //     // 实例

    //     var cityMap = {
    //         "郑州市": zhengzhou,
    //         "开封市": kaifeng,
    //         "洛阳市": luoyang,
    //         "平顶山市": pingdingshan,
    //         "安阳市": anyang,
    //         "鹤壁市": hebi,
    //         "新乡市": xinxiang,
    //         "焦作市": jiaozuo,
    //         "濮阳市": puyang,
    //         "漯河市": luohe,
    //         "三门峡市": sanmenxia,
    //         "南阳市": nanyang,
    //         "商丘市": shangqiu,
    //         "信阳市": xinyang,
    //         "周口市": zhoukou,
    //         "许昌市": xuchang,
    //         "驻马店市": zhumadian
    //     };

    // }
    var geoGpsMap = {
      1: [116.4071, 39.9046],
      2: [125.8154, 44.2584],
      3: [121.4737, 31.2303],
      4: [117.1582, 36.8701],
      5: [103.9526, 30.7617],
      6: [106.6302, 26.647],
    };
    var geoCoordMap = {
      江苏: [118.8062, 31.9208],
      黑龙江: [127.9688, 45.368],
      内蒙古: [110.3467, 41.4899],
      吉林: [125.8154, 44.2584],
      北京市: [116.4551, 40.2539],
      辽宁: [123.1238, 42.1216],
      河北: [114.4995, 38.1006],
      天津: [117.4219, 39.4189],
      山西: [112.3352, 37.9413],
      陕西: [109.1162, 34.2004],
      甘肃: [103.5901, 36.3043],
      宁夏: [106.3586, 38.1775],
      青海: [101.4038, 36.8207],
      新疆: [87.9236, 43.5883],
      四川: [103.9526, 30.7617],
      重庆: [108.384366, 30.439702],
      山东: [117.1582, 36.8701],
      河南: [113.4668, 34.6234],
      安徽: [117.29, 32.0581],
      湖北: [114.3896, 30.6628],
      浙江: [119.5313, 29.8773],
      福建: [119.4543, 25.9222],
      江西: [116.0046, 28.6633],
      湖南: [113.0823, 28.2568],
      贵州: [106.6992, 26.7682],
      云南: [102.9199, 25.4663],
      广东: [113.12244, 23.009505],
      广西: [108.479, 23.1152],
      海南: [110.3893, 19.8516],
      上海: [121.4648, 31.2891],
    };

    var d1 = {
      江苏: 10041,
      黑龙江: 4093,
      内蒙古: 1157,
      吉林: 4903,
      北京市: 2667,
      辽宁: 8331,
      河北: 23727,
      天津: 681,
      山西: 5352,
      陕西: 38,
      甘肃: 77,
      宁夏: 65,
      青海: 10,
      新疆: 193,
      四川: 309,
      重庆: 77,
      山东: 21666,
      河南: 15717,
      安徽: 15671,
      湖北: 3714,
      浙江: 3141,
      福建: 955,
      江西: 4978,
      湖南: 778,
      贵州: 33,
      云南: 149,
      广东: 1124,
      广西: 125,
      海南: 7,
      上海: 2155,
    };

    var d2 = {
      江苏: 0,
      黑龙江: 0,
      内蒙古: 0,
      吉林: 0,
      北京市: 0,
      辽宁: 0,
      河北: 0,
      天津: 0,
      山西: 0,
      陕西: 0,
      甘肃: 0,
      宁夏: 0,
      青海: 0,
      新疆: 0,
      四川: 0,
      重庆: 0,
      山东: 0,
      河南: 0,
      安徽: 0,
      湖北: 0,
      浙江: 0,
      福建: 0,
      江西: 0,
      湖南: 0,
      贵州: 0,
      云南: 0,
      广东: 0,
      广西: 0,
      海南: 0,
      上海: 0,
    };

    var d3 = {
      江苏: 11788,
      黑龙江: 1944,
      内蒙古: 2954,
      吉林: 3482,
      北京市: 1808,
      辽宁: 5488,
      河北: 27035,
      天津: 2270,
      山西: 13623,
      陕西: 4221,
      甘肃: 754,
      宁夏: 1783,
      青海: 91,
      新疆: 1907,
      四川: 4905,
      重庆: 1420,
      山东: 39781,
      河南: 16154,
      安徽: 7914,
      湖北: 6802,
      浙江: 5812,
      福建: 3345,
      江西: 4996,
      湖南: 5627,
      贵州: 1504,
      云南: 2725,
      广东: 6339,
      广西: 1009,
      海南: 0,
      上海: 1988,
    };

    var d4 = {
      江苏: 0,
      黑龙江: 0,
      内蒙古: 0,
      吉林: 0,
      北京市: 0,
      辽宁: 0,
      河北: 0,
      天津: 0,
      山西: 0,
      陕西: 0,
      甘肃: 0,
      宁夏: 0,
      青海: 0,
      新疆: 0,
      四川: 0,
      重庆: 0,
      山东: 0,
      河南: 0,
      安徽: 0,
      湖北: 0,
      浙江: 0,
      福建: 0,
      江西: 0,
      湖南: 0,
      贵州: 0,
      云南: 0,
      广东: 0,
      广西: 0,
      海南: 0,
      上海: 0,
    };

    var d5 = {
      江苏: 159,
      黑龙江: 5,
      内蒙古: 54,
      吉林: 10,
      北京市: 0,
      辽宁: 0,
      河北: 1679,
      天津: 1,
      山西: 2698,
      陕西: 1744,
      甘肃: 362,
      宁夏: 429,
      青海: 122,
      新疆: 731,
      四川: 3925,
      重庆: 1480,
      山东: 79,
      河南: 1017,
      安徽: 208,
      湖北: 1209,
      浙江: 1418,
      福建: 1237,
      江西: 1004,
      湖南: 1511,
      贵州: 345,
      云南: 1429,
      广东: 2242,
      广西: 2271,
      海南: 59,
      上海: 8,
    };

    var d6 = {
      江苏: 20,
      黑龙江: 60,
      内蒙古: 80,
      吉林: 10,
      北京市: 80,
      辽宁: 40,
      河北: 50,
      天津: 60,
      山西: 40,
      陕西: 60,
      甘肃: 40,
      宁夏: 10,
      青海: 0,
      新疆: 0,
      四川: 80,
      重庆: 0,
      山东: 60,
      河南: 0,
      安徽: 0,
      湖北: 10,
      浙江: 100,
      福建: 60,
      江西: 0,
      湖南: 0,
      贵州: 150,
      云南: 0,
      广东: 80,
      广西: 0,
      海南: 0,
      上海: 50,
    };

    var colors = [
      ["#1DE9B6", "#1DE9B6", "#FFDB5C", "#FFDB5C", "#04B9FF", "#04B9FF"],
      [
        "#1DE9B6",
        "#F46E36",
        "#04B9FF",
        "#5DBD32",
        "#FFC809",
        "#FB95D5",
        "#BDA29A",
        "#6E7074",
        "#546570",
        "#C4CCD3",
      ],
      [
        "#37A2DA",
        "#67E0E3",
        "#32C5E9",
        "#9FE6B8",
        "#FFDB5C",
        "#FF9F7F",
        "#FB7293",
        "#E062AE",
        "#E690D1",
        "#E7BCF3",
        "#9D96F5",
        "#8378EA",
        "#8378EA",
      ],
      [
        "#DD6B66",
        "#759AA0",
        "#E69D87",
        "#8DC1A9",
        "#EA7E53",
        "#EEDD78",
        "#73A373",
        "#73B9BC",
        "#7289AB",
        "#91CA8C",
        "#F49F42",
      ],
    ];
    var colorIndex = 0;
    $(function () {
      // var geoCoordMap = {
      //     '郑州': [113.64964385, 34.7566100641],
      //     '开封': [114.351642118, 34.8018541758],
      //     '洛阳': [112.447524769, 34.6573678177],
      //     '平顶山': [113.300848978, 33.7453014565],
      //     '安阳': [114.351806508, 36.1102667222],
      //     '鹤壁': [114.297769838, 35.7554258742],
      //     '新乡': [113.912690161, 35.3072575577],
      //     '焦作': [113.211835885, 35.234607555],
      //     '濮阳': [115.026627441, 35.7532978882],
      //     '漯河': [114.0460614, 33.5762786885],
      //     '三门峡': [111.181262093, 34.7833199411],
      //     '南阳': [112.542841901, 33.0114195691],
      //     "商丘": [115.641885688, 34.4385886402],
      //     '信阳': [114.085490993, 32.1285823075],
      //     '周口': [114.654101942, 33.6237408181],
      //     '许昌': [113.83531246, 34.0267395887],
      //     '驻马店': [114.049153547, 32.9831581541]
      // };

      var year = ["北京", "长春", "上海", "青岛", "成都", "贵阳"];
      var mapData = [[], [], [], [], [], []];

      /*柱子Y名称*/
      var categoryData = [];
      var barData = [];

      for (var key in geoCoordMap) {
        mapData[0].push({
          year: "长春",
          name: key,
          value: d1[key] / 100,
          value1: d1[key] / 100,
        });
        mapData[1].push({
          year: "长春",
          name: key,
          value: d1[key] / 100,
          value1: d2[key] / 100,
        });
        mapData[2].push({
          year: "青岛",
          name: key,
          value: d3[key] / 100,
          value1: d3[key] / 100,
        });
        mapData[3].push({
          year: "青岛",
          name: key,
          value: d3[key] / 100,
          value1: d4[key] / 100,
        });
        mapData[4].push({
          year: "成都",
          name: key,
          value: d5[key] / 100,
          value1: d5[key] / 100,
        });
        mapData[5].push({
          year: "成都",
          name: key,
          value: d5[key] / 100,
          value1: d6[key] / 100,
        });
      }

      for (var i = 0; i < mapData.length; i++) {
        mapData[i].sort(function sortNumber(a, b) {
          return a.value - b.value;
        });
        barData.push([]);
        categoryData.push([]);
        for (var j = 0; j < mapData[i].length; j++) {
          barData[i].push(mapData[i][j].value1);
          categoryData[i].push(mapData[i][j].name);
        }
      }

      $.getJSON(uploadedDataURL, function (geoJson) {
        echarts.registerMap("china", geoJson);
        var convertData = function (data) {
          var res = [];
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
              res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value),
              });
            }
          }
          return res;
        };

        var convertToLineData = function (data, gps) {
          var res = [];
          for (var i = 0; i < data.length; i++) {
            var dataItem = data[i];
            var toCoord = geoCoordMap[dataItem.name];
            //debugger;
            var fromCoord = gps; //郑州
            //  var toCoord = geoGps[Math.random()*3];
            if (fromCoord && toCoord) {
              res.push([
                {
                  coord: fromCoord,
                  value: dataItem.value,
                },
                {
                  coord: toCoord,
                },
              ]);
            }
          }
          return res;
        };

        optionXyMap01 = {
          timeline: {
            data: year,
            axisType: "category",
            autoPlay: true,
            playInterval: 3000,
            left: "10%",
            right: "10%",
            bottom: "3%",
            width: "80%",
            //  height: null,
            label: {
              normal: {
                textStyle: {
                  color: "#ddd",
                },
              },
              emphasis: {
                textStyle: {
                  color: "#fff",
                },
              },
            },
            symbolSize: 10,
            lineStyle: {
              color: "#555",
            },
            checkpointStyle: {
              borderColor: "#777",
              borderWidth: 2,
            },
            controlStyle: {
              showNextBtn: true,
              showPrevBtn: true,
              normal: {
                color: "#666",
                borderColor: "#666",
              },
              emphasis: {
                color: "#aaa",
                borderColor: "#aaa",
              },
            },
          },
          baseOption: {
            animation: true,
            animationDuration: 1000,
            animationEasing: "cubicInOut",
            animationDurationUpdate: 1000,
            animationEasingUpdate: "cubicInOut",
            grid: {
              right: "1%",
              top: "15%",
              bottom: "10%",
              width: "20%",
            },
            tooltip: {
              trigger: "axis", // hover触发器
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                shadowStyle: {
                  color: "rgba(150,150,150,0.1)", //hover颜色
                },
              },
            },
            geo: {
              show: true,
              map: "china",
              roam: true,
              zoom: 1,
              center: [113.83531246, 34.0267395887],
              label: {
                emphasis: {
                  show: false,
                },
              },
              itemStyle: {
                normal: {
                  borderColor: "rgba(147, 235, 248, 1)",
                  borderWidth: 1,
                  areaColor: {
                    type: "radial",
                    x: 0.5,
                    y: 0.5,
                    r: 0.8,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                      },
                    ],
                    globalCoord: false, // 缺省为 false
                  },
                  shadowColor: "rgba(128, 217, 248, 1)",
                  // shadowColor: 'rgba(255, 255, 255, 1)',
                  shadowOffsetX: -2,
                  shadowOffsetY: 2,
                  shadowBlur: 10,
                },
                emphasis: {
                  areaColor: "#389BB7",
                  borderWidth: 0,
                },
              },
            },
          },
          options: [],
        };

        for (var n = 0; n < year.length; n++) {
          optionXyMap01.options.push({
            /*backgroundColor: '#013954',*/
            title: [
              {
                text: "整车物流平台",
                subtext: "   数据由整车物流部提供",
                left: "35%",
                top: "15%",
                textStyle: {
                  color: "#fff",
                  fontSize: 25,
                },
              },
              {
                id: "statistic",
                text: year[n] + "数据统计情况",
                left: "75%",
                top: "8%",
                textStyle: {
                  color: "#fff",
                  fontSize: 25,
                },
              },
            ],
            xAxis: {
              type: "value",
              scale: true,
              position: "top",
              min: 0,
              boundaryGap: false,
              splitLine: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                margin: 2,
                textStyle: {
                  color: "#aaa",
                },
              },
            },
            yAxis: {
              type: "category",
              //  name: 'TOP 20',
              nameGap: 16,
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#ddd",
                },
              },
              axisTick: {
                show: false,
                lineStyle: {
                  color: "#ddd",
                },
              },
              axisLabel: {
                interval: 0,
                textStyle: {
                  color: "#ddd",
                },
              },
              data: categoryData[n],
            },

            series: [
              //未知作用
              {
                //文字和标志
                name: "light",
                type: "scatter",
                coordinateSystem: "geo",
                data: convertData(mapData[n]),
                symbolSize: function (val) {
                  return val[2] / 10;
                },
                label: {
                  normal: {
                    formatter: "{b}",
                    position: "right",
                    show: true,
                  },
                  emphasis: {
                    show: true,
                  },
                },
                itemStyle: {
                  normal: {
                    color: colors[colorIndex][n],
                  },
                },
              },
              //地图？
              {
                type: "map",
                map: "china",
                geoIndex: 0,
                aspectScale: 0.75, //长宽比
                showLegendSymbol: false, // 存在legend时显示
                label: {
                  normal: {
                    show: false,
                  },
                  emphasis: {
                    show: false,
                    textStyle: {
                      color: "#fff",
                    },
                  },
                },
                roam: true,
                itemStyle: {
                  normal: {
                    areaColor: "#031525",
                    borderColor: "#FFFFFF",
                  },
                  emphasis: {
                    areaColor: "#2B91B7",
                  },
                },
                animation: false,
                data: mapData,
              },
              //地图点的动画效果
              {
                //  name: 'Top 5',
                type: "effectScatter",
                coordinateSystem: "geo",
                data: convertData(
                  mapData[n]
                    .sort(function (a, b) {
                      return b.value - a.value;
                    })
                    .slice(0, 20)
                ),
                symbolSize: function (val) {
                  return val[2] / 10;
                },
                showEffectOn: "render",
                rippleEffect: {
                  brushType: "stroke",
                },
                hoverAnimation: true,
                label: {
                  normal: {
                    formatter: "{b}",
                    position: "right",
                    show: true,
                  },
                },
                itemStyle: {
                  normal: {
                    color: colors[colorIndex][n],
                    shadowBlur: 10,
                    shadowColor: colors[colorIndex][n],
                  },
                },
                zlevel: 1,
              },
              //地图线的动画效果
              {
                type: "lines",
                zlevel: 2,
                effect: {
                  show: true,
                  period: 4, //箭头指向速度，值越小速度越快
                  trailLength: 0.1, //特效尾迹长度[0,1]值越大，尾迹越长重
                  symbol: "arrow", //箭头图标
                  symbolSize: 5, //图标大小
                },
                lineStyle: {
                  normal: {
                    color: colors[colorIndex][n],
                    width: 0.3, //尾迹线条宽度
                    opacity: 0.8, //尾迹线条透明度
                    curveness: 0.3, //尾迹线条曲直度
                  },
                },
                data: convertToLineData(mapData[n], geoGpsMap[n + 1]),
              },
              //柱状图
              {
                zlevel: 1.5,
                type: "bar",
                symbol: "none",
                itemStyle: {
                  normal: {
                    color: colors[colorIndex][n],
                  },
                },
                data: barData[n],
              },
            ],
          });
        }
        myChart.setOption(optionXyMap01);
      });
    });

    function randomNum(minNum, maxNum) {
      switch (arguments.length) {
        case 1:
          return parseInt(Math.random() * minNum + 1, 10);
          break;
        case 2:
          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
          break;
        default:
          return 0;
          break;
      }
    }

    // 使用刚指定的配置项和数据显示图表。
    //myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }

  function ceshis6() {
    var myChart = echarts.init(document.getElementById("diqu"));

    var uploadedDataURL = "./js/data-1482909892121-BJ3auk-Se.json";
    myChart.showLoading();
    $.getJSON(uploadedDataURL, function (geoJson) {
      echarts.registerMap("jiangxi", geoJson);
      myChart.hideLoading();
      var geoCoordMap = {
        济南市: [117.121225, 36.66466],
        菏泽市: [115.480656, 35.23375],
        济宁市: [116.59, 35.38],
        德州市: [116.39, 37.45],
        聊城市: [115.97, 36.45],
        泰安市: [117.13, 36.18],
        临沂市: [118.35, 35.05],
        淄博市: [118.05, 36.78],
        枣庄市: [117.57, 34.86],
        滨州市: [118.03, 37.36],
        潍坊市: [119.1, 36.62],
        东营市: [118.49, 37.46],
        青岛市: [120.3, 36.62],
        烟台市: [120.9, 37.32],
        威海市: [122.1, 37.2],
        日照市: [119.1, 35.62],
        济宁市: [116.7, 35.42],
        莱芜市: [117.7, 36.28],
      };
      var data = [
        {
          name: "济南市",
          value: 590,
        },
        {
          name: "菏泽市",
          value: 380,
        },
        {
          name: "德州市",
          value: 352,
        },
        {
          name: "聊城市",
          value: 99,
        },
        {
          name: "泰安市",
          value: 189,
        },
        {
          name: "临沂市",
          value: 252,
        },
        {
          name: "淄博市",
          value: 158,
        },
        {
          name: "枣庄市",
          value: 352,
        },
        {
          name: "滨州市",
          value: 189,
        },
        {
          name: "潍坊市",
          value: 360,
        },
        {
          name: "东营市",
          value: 280,
        },
        {
          name: "青岛市",
          value: 180,
        },
        {
          name: "烟台市",
          value: 190,
        },
        {
          name: "威海市",
          value: 380,
        },
        {
          name: "日照市",
          value: 390,
        },
        {
          name: "济宁市",
          value: 290,
        },
        {
          name: "莱芜市",
          value: 290,
        },
      ];
      var max = 480,
        min = 9; // todo
      var maxSize4Pin = 100,
        minSize4Pin = 20;

      var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),
            });
          }
        }
        return res;
      };

      option = {
        /*backgroundColor: '#020933',*/
        title: {
          top: 20,
          text: "“会员活跃度” - 山东省",
          subtext: "",
          x: "center",
          textStyle: {
            color: "#ccc",
          },
        },

        tooltip: {
          trigger: "item",
          formatter: function (params) {
            if (typeof params.value[2] == "undefined") {
              return params.name + " : " + params.value;
            } else {
              return params.name + " : " + params.value[2];
            }
          },
        },
        /*   legend: {
                       orient: 'vertical',
                       y: 'bottom',
                       x: 'right',
                        data:['pm2.5'],
                       textStyle: {
                           color: '#fff'
                       }
                   },*/
        legend: {
          orient: "vertical",
          y: "bottom",
          x: "right",
          data: ["pm2.5"],
          textStyle: {
            color: "#fff",
          },
        },
        visualMap: {
          show: false,
          min: 0,
          max: 500,
          left: "left",
          top: "bottom",
          text: ["高", "低"], // 文本，默认为数值文本
          calculable: true,
          seriesIndex: [1],
          inRange: {
            /*color: ['#3B5077', '#031525'] ,// 蓝黑
                        color: ['#ffc0cb', '#800080'] ,// 红紫
                        color: ['#3C3B3F', '#605C3C'] ,// 黑绿
                       color: ['#0f0c29', '#302b63', '#24243e'], // 黑紫黑
                       color: ['#23074d', '#cc5333'] ,// 紫红
                        color: ['#00467F', '#A5CC82'] ,// 蓝绿
                        color: ['#1488CC', '#2B32B2'], // 浅蓝
                        color: ['#00467F', '#A5CC82'], // 蓝绿
                        color: ['#00467F', '#A5CC82'], // 蓝绿
                        color: ['#00467F', '#A5CC82'], // 蓝绿
                        color: ['#00467F', '#A5CC82'], // 蓝绿*/
          },
        },

        geo: {
          show: true,
          map: "jiangxi",
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: "transparent",
              borderColor: "#3fdaff",
              borderWidth: 2,
              shadowColor: "rgba(63, 218, 255, 0.5)",
              shadowBlur: 30,
            },
            emphasis: {
              areaColor: "#2B91B7",
            },
          },
        },
        series: [
          {
            name: "light",
            type: "scatter",
            coordinateSystem: "geo",
            data: convertData(data),
            symbolSize: function (val) {
              return val[2] / 10;
            },
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: true,
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                color: "#F4E925",
              },
            },
          },
          {
            type: "map",
            map: "jiangxi",
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: "#fff",
                },
              },
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: "#031525",
                borderColor: "#FFFFFF",
              },
              emphasis: {
                areaColor: "#2B91B7",
              },
            },
            animation: false,
            data: data,
          },
          {
            name: "Top 5",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: convertData(
              data
                .sort(function (a, b) {
                  return b.value - a.value;
                })
                .slice(0, 5)
            ),
            symbolSize: function (val) {
              return val[2] / 10;
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: true,
              },
            },
            itemStyle: {
              normal: {
                color: "#F4E925",
                shadowBlur: 10,
                shadowColor: "#05C3F9",
              },
            },
            zlevel: 1,
          },
        ],
      };
      myChart.setOption(option);
    });

    // 使用刚指定的配置项和数据显示图表。

    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }

  function ceshis7() {
    var myChart = echarts.init(document.getElementById("chart_1"));

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }
});
